<template>
  <div style="padding: 10px">
    <el-table
      :data="tableListData?.jcxmList"
      border
      :span-method="spanMethod"
      ref="textScrollbarRef"
      :max-height="textHeight"
      v-loading="loading"
    >
      <el-table-column label="采样点位" width="200" align="center" fixed>
        <el-table-column label="采样日期" align="center" width="200">
          <el-table-column prop="jcxmName" label="样品编号" align="center" width="200">
            <!-- <el-row v-if="scope.$index != tableListData?.jcxmList.length - 1"> -->
            <template #default="scope">
              <el-row>
                <span v-html="proxy.getSupAndSub(scope.row.jcxmName)"></span>
                <span v-if="scope.row.checkLimitUnit">（</span>
                <span v-html="proxy.getSupAndSub(scope.row.checkLimitUnit)"></span>
                <span v-if="scope.row.checkLimitUnit">）</span>
              </el-row>
              <!-- <span v-else>{{ scope.row.jcxmName }}</span> -->
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableListData?.sampleList"
        :key="index"
        min-width="200"
        :label="item.pointName"
        align="center"
      >
        <el-table-column
          min-width="200"
          :label="tableListData?.sampleList[index].cyDate"
          align="center"
        >
          <el-table-column
            :label="tableListData?.sampleList[index].sampleCode"
            align="center"
            min-width="200"
          >
            <template #default="scope">
              <div
                :relName="
                  scope.row[tableListData?.sampleList[index].pointId + tableListData?.sampleList[index].sampleCode]
                    ? scope.row[tableListData?.sampleList[index].pointId + tableListData?.sampleList[index].sampleCode][0]
                    : ''
                "
                @click="
                  handleTd(scope.row[tableListData?.sampleList[index].pointId + tableListData?.sampleList[index].sampleCode], $event)
                "
                style="width: 100%; cursor: pointer; min-height: 23px"
              >
                <span v-if="scope.row[tableListData?.sampleList[index].pointId + tableListData?.sampleList[index].sampleCode]">{{
                  scope.row[tableListData?.sampleList[index].pointId + tableListData?.sampleList[index].sampleCode][1]
                }}</span>
                <span v-else>/</span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { getCenterTable } from "@/api/dataAnalysis/selectProject";
import bus from "@/utils/eventBus";

const { proxy } = getCurrentInstance();
const tableListData = ref();
const textHeight = ref(0);

const loading = ref(false);

function spanMethod({ row, column, rowIndex, columnIndex }) {}

function getTable(row) {
  loading.value = true;
  getCenterTable(row).then((res) => {
    loading.value = false;
    tableListData.value = res.data;
  });
}

const emit = defineEmits(["getSJId"]);

function handleTd(row, e) {
  if (row) {
    $(".hisColor").removeClass("hisColor");
    var $target = $(e.target);
    var $bgc = $(".bgcTdr");
    $bgc.removeClass("bgcTdr");
    if ($target[0].tagName.toLowerCase() != "td") {
      $target = $target.parents("td:first");
    }
    $target.addClass("bgcTdr");
    emit("getSJId", row[0]);
  }
}

function getHeight() {
  nextTick(() => {
    textHeight.value = proxy.getSubFileHeight(proxy, "textScrollbarRef", 50);
  });
}

onMounted(() => {
  nextTick(() => {
    getHeight();
    window.addEventListener("resize", getHeight);
  });
});
onUpdated(() => {
  nextTick(() => {
    getHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});

bus.off("getLoading");
bus.on("getLoading", () => {
  loading.value = true;
});

function getColor(val) {
  const getRelNameDom = Array.from(
    document.querySelectorAll('[relName]:not([relName=""])')
  );
  let getBlueColorDom = Array.from(document.querySelectorAll("." + val.class));
  getBlueColorDom.forEach((item) => {
    item.classList.remove(val.class);
  });
  getBlueColorDom = Array.from(document.querySelectorAll(".hisColor"));
  getBlueColorDom.forEach((item) => {
    item.classList.remove("hisColor");
  });
  if (val.data.length > 0 && getRelNameDom.length > 0) {
    val.data.forEach((item) => {
      for (let i = 0; i < getRelNameDom.length; i++) {
        if (getRelNameDom[i].getAttribute("relName") == item) {
          let closestTd = getRelNameDom[i].closest("td");
          if (closestTd) {
            closestTd.classList.add(val.class);
          }
          break;
        }
      }
    });
  }
  loading.value = false;
}

defineExpose({
  getTable,
  getColor,
});
</script>

<style scoped lang="scss">
:deep(.bgcTdr) {
  background-color: #d8fdde !important;
}

:deep(.blueColor) {
  background-color: #6f88ff !important;
  color: #fff;
}

:deep(.hisColor) {
  background-color: #d400ff !important;
  color: #fff;
}
</style>
